<template>
    <sub-box v-loading="loading">
        <breadcrumb :title="'新增资源'"></breadcrumb>
        <div class="white-block mt20">
            <div class="head-line">基本信息</div>
            <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                     size="small" label-width="120px" :label-position="'left'">
                <el-form-item label="资源名称：" prop="name">
                    <el-input v-model="ruleForm.name" size="small"></el-input>
                </el-form-item>

                <!--                <el-form-item label="资源标识：">-->
                <!--                    <span>{{detail.resCode}}</span>-->
                <!--                </el-form-item>-->

                <el-form-item label="归集状态：" prop="situation">
                    <el-select v-model="ruleForm.situation" class="full" size="small">
                        <el-option
                            v-for="item in resSituationList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="资源类型：" prop="type" v-if="ruleForm.situation!=2">
                    <el-input type="text" value="数据交换类" size="small" disabled></el-input>
                    <!--                    <el-select v-model="ruleForm.type" size="small" class="full">-->
                    <!--                        <el-option-->
                    <!--                            v-for="item in typeOptions"-->
                    <!--                            :key="item.value"-->
                    <!--                            :label="item.label"-->
                    <!--                            :value="item.value">-->
                    <!--                        </el-option>-->
                    <!--                    </el-select>-->
                </el-form-item>

                <el-form-item label="更新周期：" prop="frequency">
                    <el-select v-model="ruleForm.frequency" class="full" size="small">
                        <el-option
                            v-for="item in frequencyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="资源状态：" prop="state">
                    <el-select v-model="ruleForm.state" class="full" size="small">
                        <el-option
                            v-for="item in stateOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="共享方式：" prop="resPower">
                    <el-select v-model="ruleForm.resPower" class="full" size="small">
                        <el-option
                            v-for="item in shareTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审批部门：" v-if="ruleForm.resPower==2">
                    <div class="form-item-content">
                        <select-tree @loadNode="loadNode"
                                     :size="'small'"
                                     :loading.sync="provideDeptTree.loading"
                                     :renderTree.sync="provideDeptTree.renderTree"
                                     :lazy.sync="provideDeptTree.lazy"
                                     :clearable.sync="provideDeptTree.clearable"
                                     :filterable.sync="provideDeptTree.filterable"
                                     :model.sync="dept"
                                     :accordion.sync="provideDeptTree.accordion"
                                     :expandAll.sync="provideDeptTree.expandAll"
                                     :provideDeptTree="provideDeptTree"
                                     @filterMethod="dataFilter"
                                     :props="dataConsumersprops"
                                     :options="provideDeptTree.options"
                                     @nodeClick="treeNodeClick"
                                     class="full">
                        </select-tree>
                    </div>
                </el-form-item>

                <el-form-item label="资源来源：" prop="resGetSource">
                    <el-input v-model="ruleForm.resGetSource" size="small"></el-input>
                </el-form-item>

                <el-form-item label="资源应用范围：" prop="resLevel">
                    <el-select v-model="ruleForm.resLevel" class="full" size="small">
                        <el-option
                            v-for="item in resLevelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="提供部门：">
                    <select-tree @loadNode="loadNode"
                                 :size="'small'"
                                 :loading.sync="provideDeptTree.loading"
                                 :renderTree.sync="provideDeptTree.renderTree"
                                 :lazy.sync="provideDeptTree.lazy"
                                 :clearable.sync="provideDeptTree.clearable"
                                 :filterable.sync="provideDeptTree.filterable"
                                 :model.sync="ruleForm.SourceDept"
                                 :accordion.sync="provideDeptTree.accordion"
                                 :expandAll.sync="provideDeptTree.expandAll"
                                 :provideDeptTree="provideDeptTree"
                                 @filterMethod="dataFilter"
                                 :props="dataConsumersprops"
                                 :options="provideDeptTree.options"
                                 @nodeClick="treeNodeClick"
                                 class="full">
                    </select-tree>
                </el-form-item>
                <el-form-item label="资源说明：">
                    <el-input type="textarea" v-model="ruleForm.rdResourceDesc" :autosize="{ minRows: 4, maxRows: 4}"
                              size="small"></el-input>
                </el-form-item>
                <div class="mt20 text-center">
                    <el-button type="primary" size="small" class="vast" @click="save">保存</el-button>
                </div>
            </el-form>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import selectTree from '../../components/select-tree'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                loading: false,
                ruleForm: {
                    name: '',
                    type: 3,
                    resLevel: '',
                    resPower: 1,
                    state: 0,
                    situation: 2,
                    resGetSource: '',
                    frequency: '',
                    remark: '',
                    rdResourceDesc: '',
                    SourceDept: {
                        value: '',
                        label: ''
                    }
                },
                dept: {
                    value: '',
                    label: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入资源名称', trigger: 'blur'}
                    ]
                },
                shareTypeOptions: [
                    {
                        label: '公开',
                        value: 1
                    },
                    {
                        label: '受限',
                        value: 2
                    }
                ],
                stateOptions: [
                    {
                        label: '未发布',
                        value: 0
                    },
                    {
                        label: '已发布',
                        value: 1
                    }
                ],
                resLevelList: [
                    {
                        label: '省级',
                        value: 1
                    },
                    {
                        label: '市级',
                        value: 2
                    },
                    {
                        label: '区级',
                        value: 3
                    }
                ],
                resSituationList: [
                    {
                        label: '未归集',
                        value: 2
                    },
                    {
                        label: '已归集',
                        value: 1
                    }
                ],
                typeOptions: [
                    // {
                    //     label: '服务接口类',
                    //     value: 1
                    // },
                    {
                        label: '数据交换类',
                        value: 3
                    }
                    // {
                    //     label: '服务页面类',
                    //     value: 2
                    // }
                ],
                frequencyOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '实时',
                        value: 1
                    },
                    {
                        label: '每小时',
                        value: 2
                    },
                    {
                        label: '每天',
                        value: 3
                    },
                    {
                        label: '每月',
                        value: 4
                    },
                    {
                        label: '每季度',
                        value: 5
                    },
                    {
                        label: '每半年',
                        value: 6
                    },
                    {
                        label: '每年',
                        value: 7
                    },
                    {
                        label: '不更新',
                        value: 8
                    },
                    {
                        label: '不定时',
                        value: 9
                    }
                ],
                firstDeptList: null,
                dataConsumersprops: {
                    value: 'id', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        },
        mounted() {
            this.ruleForm.SourceDept = {
                value: this.user.ownDeptId,
                label: this.user.ownDeptName
            }
            this.dept = {
                value: this.user.ownDeptId,
                label: this.user.ownDeptName
            }
        },
        methods: {
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || 0
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                        this.$message({
                            type: 'info',
                            message: '获取部门失败!'
                        })
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            },
            save() {
                let _this = this
                this.validate('ruleForm', () => {
                    _this.loading = true
                    _this.$http.post('/rdResourceDir/addRes', {
                        collectionSituation: _this.ruleForm.situation, // 归集情况
                        resGetSource: _this.ruleForm.resGetSource, // 来源部门
                        resLevel: _this.ruleForm.resLevel, // 资源层级
                        resName: _this.ruleForm.name, // 资源名称
                        resPower: _this.ruleForm.resPower, // 资源权限
                        resPowerDept: _this.ruleForm.resPower === 1 ? '' : _this.dept.label, // 资源权限部门名称
                        resPowerDeptId: _this.ruleForm.resPower === 1 ? '' : _this.dept.value, // 资源权限部门id
                        resSourceDept: _this.ruleForm.SourceDept.label, // 资源提供部门名称
                        resSourceDeptId: _this.ruleForm.SourceDept.value, // 资源提供部门id
                        resType: _this.ruleForm.type, // 资源类型
                        updateFrequency: _this.ruleForm.frequency, // 更新周期
                        isRelease: _this.ruleForm.state, // 发布情况
                        rdResourceDesc: _this.ruleForm.rdResourceDesc // 资源说明
                    }).then(result => {
                        _this.loading = false
                        if (result.success) {
                            _this.$message.success({
                                message: '新增成功',
                                showClose: true
                            })
                            _this.$emit('upload')
                            _this.$nextTick(() => {
                                _this.$method.historyBack()
                            })
                        }
                    }).catch(() => {
                        _this.loading = false
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            }

        },
        components: {
            subBox,
            breadcrumb,
            selectTree
        }
    }
</script>

<style scoped lang="less">
    .form-common {
        min-width: 860px;
        max-width: 1200px;

        .el-form-item {
            width: 45%;
            display: inline-block;
            vertical-align: top;

            &:nth-child(2n) {
                margin-left: 8%;
            }
        }
    }
</style>
